<template>
  <div class="salesbig">
    <div>
      <van-nav-bar title="全部门店" left-arrow @click-left="$router.back()" />
    </div>
    <div class="salesbox">
      <div v-for="item in salesroomlist" :key="item.allstoresId" class="ssbox">
        <div class="top"><img :src="item.img" alt=""></div>
        <div class="bom">
          <div>
            <h4><van-icon name="shop-collect-o" />{{ item.storeName }}</h4>
            <p><van-icon name="underway-o" />{{ item.openTime }}</p>
            <p><van-icon name="location-o" />{{ item.storeAddress }}</p>
            <p><van-icon name="phone-o" />{{ item.telephone }}</p>
          </div>
          <div class="bommm">
            <div>
              <van-icon name="guide-o" />
              导航
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { salesroomlist } from '@/api/salesroom'

export default {
  data() {
    return {
      salesroomlist: [
      ]
    }
  },
  methods: {
    async getrooms() {
      let res = await salesroomlist();
      this.salesroomlist = res.data;
    },
  },
  mounted() {
    this.getrooms();
  }
}
</script>

<style lang="scss" scoped >
.salesbig {
  width: 100%;
  background: #f5f5f5;

  .salesbox {
    margin-top: 20px;
    width: 90%;
    background: #fff;
    border-radius: 9px;
    margin-left: 5%;
  }

  .top img {
    width: 100%;
    height: 144px;
    border-radius: 25px;
  }

  .bom {
    width: 100%;
    background: #fff;
    border-radius: 0 0 25px 25px;
    display: flex;
    margin: 12px 0;
  }

  .bommm {
    padding: 10px 0 0 50px;
  }

  .bom p {
    font-size: 12px;
    color: #333;
  }
}
</style>